import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, UserOutlined, VideoCameraOutlined, } from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';
import '../../assets/styles/home.css'
import loginimg from '../../assets/logo.png'
import { useEffect } from 'react';
import api from '../../aips/menu'
import { Outlet, useNavigate } from 'react-router-dom';
import { DownOutlined, LogoutOutlined, KeyOutlined, SettingOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
import { Button, Modal } from 'antd';
import { Checkbox, Form, Input } from 'antd';
import DrawerNext from './DrawerNext';
import { useLocation } from 'react-router-dom';
// import HomeTag from './HomeTag'
const { Header, Sider, Content } = Layout;

const Home = () => {
  const location=useLocation()
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
        //子组件抽屉
    };
    const onClose = () => {
        setOpen(false);
        //子组件抽屉
    };
    const items = [
        {
            label: '个人中心',
            onClick: handleMenuClick,
            key: '/profile',
            icon: <UserOutlined />
        },
        {
            label: '密码修改',
            onClick: showModal,
            key: '1',
            icon: <KeyOutlined />,
        },
        {
            type: 'divider',
        },
        {
            label: '系统定制',
            onClick: showDrawer,
            key: '2',
            icon: <SettingOutlined />
        },
        {
            type: 'divider',
        },
        {
            label: '退出登录',
            onClick: loginPath,
            key: '4',
            icon: <LogoutOutlined />
        },

    ];
    function modei() {

    }
    function loginPath() {
        localStorage.clear()
        navigate('/login')
    }
    function handleMenuClick(e) {
        console.log(e);
        navigate(e.key)
    }
    const navigate = useNavigate()
    console.log(location);
    const [collapsed, setCollapsed] = useState(false);
    const [menuList, setMenuList] = useState([])
    const headImg = JSON.parse(localStorage.user).avatar
    useEffect(() => {
        api.menuList(JSON.parse(localStorage.user).username).then(res => {
            setMenuList(filterMenu(res[0].children))
        })
    }, [])

    function filterMenu(menu) {
        let level = 0
        return handelmenu(menu)
        function handelmenu(menu) {
            return menu.map((item, index) => {
                const o = {
                    label: item.name,
                    key: item.path,
                }
                if (item.children) {
                    level++
                    o.children = handelmenu(item.children)
                    o.key = `${o.key}-${index}`
                    level = 0
                }
                if (item.icon) {
                    o.icon = <i style={{ display: 'inline-block' }} className={'iconfont iconfont-' + item.icon}></i >
                }
                console.log(o,'ppop');
                return o
            })
        }
    }

    function clickItem(obj) {
        console.log(obj);
        navigate(obj.key)
        localStorage.submenu=obj.key
    }



    return (

        <Layout style={{ height: '100vh' }} hasSider>
            <Sider trigger={null} collapsible collapsed={collapsed} width='240' style={{
                backgroundColor: '#fff',
                overflow: 'auto',
                height: '100vh',
                left: 0,
                top: 0,
                bottom: 0,
            }}
        >
                <div className="logo">
                    <img src={loginimg} alt="" />
                </div>
                <Menu
                    theme='dark'
                    mode="inline"
                    // defaultSelectedKeys={['1']}
                    items={menuList}
                    onClick={clickItem}
                    defaultSelectedKeys={[location.pathname]}
                    defaultOpenKeys={[localStorage.submenu]}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                        paddingLeft: 20,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}
                >
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })
                    }
                    <div>

                        <Dropdown
                            menu={{
                                items,
                            }}
                        >
                            <a onClick={(e) => e.preventDefault()}>
                                <Space>
                                    <img src={'http://xawn.f3322.net:8002/distremote/static/avatar/' + headImg} alt="" style={{ width: '50px', height: '50px', borderRadius: '50%', margin: '0 20px' }} />
                                    <span>{JSON.parse(localStorage.user).username}</span>
                                </Space>
                            </a>
                        </Dropdown>
                    </div>

                </Header>
                {/* <HomeTag></HomeTag> */}
                <Content
                    style={{
                        // margin: '16px 16px',
                        padding: 15,
                        minHeight: 280,
                        overflowY: 'scroll'
                    }}

                >
                    <div className="site-layout-background" style={{ padding: 24 }}>

                        <Outlet></Outlet>
                    </div>

                    <div style={{ width: '100%', height: '60px', display: 'flex', lineHeight: '70px', justifyContent: 'center' }}>Copyright  2022 admin</div>
                </Content>
            </Layout>
            <>
                <Modal title="密码修改" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 20,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="旧密码："
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="新密码："
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="再次确认："
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </>
            <DrawerNext showDrawer={showDrawer} onClose={onClose} open={open}></DrawerNext>
        </Layout >


    )
}

export default Home